<template>
  <div v-if="type === 'default'">
    <div class="flex items-center justify-between p10px">
      <div class="flex items-center justify-between">
        <img :src="defaultAvatar" :style="avatarStyle" />
        <div class="ml flex justify-between">
          <div class="">
            <div class="mb2 text-16px font-bold">
              <span :style="{ color: defaultUsernameColor }">{{ defaultUsername }}</span>
            </div>
            <div class="text-12px" :style="{ color: defaultNoticeColor }">{{ defaultNotice }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div v-else class="text-center">
    <img :src="defaultAvatar" :style="avatarStyle" />
    <div class="mb2 text-16px font-bold">
      <div :style="{ color: defaultUsernameColor }">{{ defaultUsername }}</div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'DkAppUserHeader',
  props: {
    // 类型
    type: { type: String, default: 'default' },
    // 头像大小
    avatarSize: { type: Number, default: 50 },
    // 头像形状
    avatarShape: { type: String, default: 'circle' },
    // 默认头像
    defaultAvatar: { type: String, default: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png' },
    // 未登录用户名
    defaultUsername: { type: String, default: '点击登录' },
    // 昵称颜色
    defaultUsernameColor: { type: String, default: '#000' },
    // 提示信息颜色
    defaultNoticeColor: { type: String, default: '#999' },
    // 未登录标注
    defaultNotice: { type: String, default: '登录后可查看更多信息' },
    // 头像样式
    avatarStyle: { type: Object, default: () => ({}) }
  },
  data() {
    return {}
  }
}
</script>
<style scoped></style>
